<template>
    <div>
      <div>
        <h1 style="text-align: center">图片检测</h1>
        <div style="display: flex;">
          <div style="flex: 10;padding: 0 10px;border: 1px solid #dcdfe6;text-align: center;">
            <h3>请选择图片</h3>
            <image-upload style="margin-top: 130px" @input="getImgData"></image-upload>
          </div>
          <div style="text-align: center;flex: 1;margin: 200px 20px auto 20px">
            <el-button type="primary" @click="submitForm" style="margin: 10px 0">检 测</el-button>
            <el-button @click="cancel" style="margin: 10px 0">重 置</el-button>
          </div>
          <div style="flex: 10;margin: 0 10px;border: 1px solid #dcdfe6;height: 500px;overflow: scroll;text-align: center">
            <h3>检测结果</h3>
            <div v-html="resultHtml" style="padding: 10px"></div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    import ImageUpload from "../../../components/ImageUpload/index";
    import {Message} from "element-ui";
    import {addImagefilter} from "@/api/filter/imagefilter";
    export default {
      name: "index",
      components: {ImageUpload},
      data(){
          return{
            // 检测结果
            resultHtml:'',
            // imge地址记录
            imageUrl: '',
          }
      },
      methods:{
        /**获取imge信息*/
        getImgData(data){
          this.imageUrl = data
        },
        /** 检测按钮 */
        submitForm() {
          if (this.imageUrl===''||this.imageUrl==='<p><br></p>') {
            Message({
              message: '请上传检测图片',
              type: 'warning'
            })
          }else{
            addImagefilter({imagePath:this.imageUrl}).then(response => {
              this.resultHtml = response.msg;
            });
          }
        },
        //  重置
        cancel(){
          this.resultHtml = ''
        }
      }
    }
</script>

<style scoped>

</style>
